<template>
	<view class="container">
		<view class="header-bar">
            <view class="search-bar flex-row">
                <navigator class="icon-back" open-type="navigateBack"></navigator>
                <input type="text" placeholder="搜索商品名称" />
                <navigator class="icon-search" url="./detail"></navigator>
            </view>
            <view class="sort-bar flex-row">
                <view @click="showChildSort=!showChildSort" :class="{active:currentSort==currentFirstSort}" class="sum">
                    <text>{{currentFirstSort}}</text>
                </view>
                <view @click="handleClickSort('销量')" :class="{active:currentSort=='销量'}"><text>销量</text></view>
                <view :class="{upActive:currentSort=='up',downActive:currentSort=='down'}" class="price">
                    <text>价格</text>
                    <view @click="handleClickSort('up')" class="up"></view>
                    <view @click="handleClickSort('down')" class="down"></view>
                </view>
                <view><text>筛选</text></view>
            </view>
            <view v-show="showChildSort" class="child-sort">
                <view @click="handleClickFirstSort('综合')" :class="{active:currentSort=='综合'}">综合排序</view>
                <view @click="handleClickFirstSort('新品')" :class="{active:currentSort=='新品'}">新品优先</view>
            </view>
        </view>
        <view>hhhhhhhhhhhhh</view>
        <view @click="showChildSort=false" v-show="showChildSort" class="mask"></view>
	</view>
</template> 

<script>
export default {
    data() {
        return {
            sortNav:[
                {name:'综合',active:true,child:[
                    {name:'综合排序',active:true},
                    {name:'新品优先',active:false}
                ]},
                {name:'销量',active:false},
                {name:'价格',active:false},
                {name:'筛选',active:false},
            ],
            currentSort: '综合',
            currentFirstSort:'综合',
            showChildSort:false,
        }
    },
    methods: {
        handleClickSort(sortType){
            console.log(sortType);
            this.currentSort = sortType;
            this.showChildSort = false;
            if(sortType == '销量'){
                // do 排序
            }else if(sortType == 'up'){
                // 
            }else if(sortType == 'down'){
                // 
            }
        },
        handleClickFirstSort(sortType){
            this.currentFirstSort = sortType;
            this.currentSort = sortType;
            this.showChildSort = false;
            if(sortType == '综合'){
                // 
            }else if(sortType == '新品'){
                // 
            }
            
        }
            
    }
}
</script>

<style lang="stylus" scoped>
    .container
        padding-top calc(var(--status-bar-height) + 160rpx)
    .header-bar
        position fixed
        z-index: 99;
        top var(--status-bar-height)
        width 100%
        height 160rpx
        background #fafafa
        .search-bar
            height 82rpx
            .icon-back
                width 52rpx
                height 52rpx
                background no-repeat center url('')
                background-size 52rpx
                padding 0 21rpx
            input
                flex 1
                height 52rpx
                border: 2rpx solid #e5e5e5;
                background #fff
                border-radius: 4rpx
                padding 0 20rpx
                font-size 30rpx
            .icon-search
                width 62.5rpx
                height 62.5rpx
                background no-repeat center url('')
                background-size 62.5rpx
                padding 0 21rpx
        .sort-bar
            height 78rpx
            >view
                width 25%
                height 78rpx
                line-height 78rpx
                text-align center
                color: rgba(0,0,0,.54)
                font-size 30rpx
            >view.active
                color #ff6700
            .sum
                text
                    position relative
                    &:after
                        content ""
                        position absolute
                        top 50%
                        right -24rpx
                        width: 0;
                        height: 0;
                        border 8rpx solid
                        border-color: #bdbdbd transparent transparent;
                &.active text:after
                    border-top-color #ff6700
            .price
                position relative
                .up
                    position absolute
                    top 0
                    width 100%
                    height 50%
                .down
                    @extends .up
                    top 50%
                text
                    position relative
                    &:before,&:after
                        content ""
                        position absolute
                        right -24rpx
                        width: 0;
                        height: 0;
                        border 8rpx solid
                    &:before
                        top 0
                        border-color: transparent transparent #bdbdbd;
                    &:after
                         bottom 0
                         border-color: #bdbdbd transparent transparent;
                &.upActive,&.downActive
                    color #ff6700
                &.upActive text:before
                    border-bottom-color #ff6700
                &.downActive text:after
                    border-top-color #ff6700
        .child-sort
            background #fafafa
            >view
                height 100rpx
                line-height 100rpx
                margin 0 34rpx
                font-size 30rpx
                color #000000de
                border-bottom: 2rpx solid rgba(0,0,0,.15)
                &.active
                    color #ff6700
                    position relative
                    &:after
                        position absolute
                        content ""
                        right 10rpx
                        top 50%
                        transform translateY(-50%)
                        width: 36rpx;
                        height: 24rpx;
                        background: url('') 50% 0;
                        background-size: cover
</style>
